import React, { forwardRef, memo } from 'react';
import { HeaderContainer, Marquee } from './style';
import PropTypes from 'prop-types';
const DetailHeader = memo(
  forwardRef(function (props, ref) {
    const { handleClick, title, isMarquee } = props;
    return (
      <HeaderContainer ref={ref}>
        <i className="iconfont back" onClick={handleClick}>
          &#xe655;
        </i>
        {isMarquee ? (
          <Marquee>
            <h1 className="text">{title}</h1>
          </Marquee>
        ) : (
          <h1>{title}</h1>
        )}
      </HeaderContainer>
    );
  })
);

DetailHeader.defaultProps = {
  handleClick: () => {},
  title: '标题',
  isMarquee: false,
};

DetailHeader.propTypes = {
  handleClick: PropTypes.func,
  title: PropTypes.string,
  isMarquee: PropTypes.bool,
};
export default DetailHeader;
